import { MaterialModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Host } from '@angular/core';

@Component({
    selector: 'div[keyboard]',
    template: `
        <md-grid-list cols="4" rowHeight="50px" class="text-s">
            <md-grid-tile class="keyboard-key" style="outline: 1px solid #CCCCCC;" *ngFor="let key of keyboard" [colspan]="key.cols" [rowspan]="key.rows">
                <div class="pct100 layout layout-align-center-center" style="height: 100%" (click)="clickItem(key)">
                    <div *ngIf="key.icon">
                        <div [ngClass]="key.class"></div>
                    </div>
                    <div *ngIf="!key.icon">
                        <div class="text-center">{{key.text}}</div>
                        <div class="text-center">{{key.subText}}</div>
                    </div>
                </div>
            </md-grid-tile>
        </md-grid-list>
    `
})
export class Keyboard {
    @Input() keyItem: string;

    @Output() setKeyText: EventEmitter<any> = new EventEmitter<any>();

    @Output() backSpace: EventEmitter<any> = new EventEmitter<any>();

    @Output() doEnter: EventEmitter<any> = new EventEmitter<any>();

    @Output() doReset: EventEmitter<any> = new EventEmitter<any>();

    keyboard = [
        { text: "1", model: "1", cols: 1, rows: 1 },
        { text: "2", subText: "abc", model: "2", cols: 1, rows: 1 },
        { text: "3", subText: "def", model: "3", cols: 1, rows: 1 },
        { class: "i-backspace", icon: "true", model: "del", cols: 1, rows: 1 },
        { text: "4", subText: "ghi", model: "4", cols: 1, rows: 1 },
        { text: "5", subText: "jkl", model: "5", cols: 1, rows: 1 },
        { text: "6", subText: "mno", model: "6", cols: 1, rows: 1 },
        { class: "icon-enter", icon: "true", model: "enter", cols: 1, rows: 3 },
        { text: "7", subText: "pqrs", model: "7", cols: 1, rows: 1 },
        { text: "8", subText: "tuv", model: "8", cols: 1, rows: 1 },
        { text: "9", subText: "wxyz", model: "9", cols: 1, rows: 1 },
        { text: "0", model: "0", cols: 2, rows: 1 },
        { text: "重输", model: "reset", cols: 1, rows: 1 }
    ]

    clickItem(key) {
        if (key.model == "enter") {
            this.doEnter.emit("");
        } else if (key.model == "del") {
            this.backSpace.emit("");
        } else if (key.model == "reset") {
            this.doReset.emit("");
        } else {
            this.setKeyText.emit(key);
        }
    }
}

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        MaterialModule
    ],
    declarations: [Keyboard],
    exports: [Keyboard],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class KeyboardModule { }